/**
 * Created by Freeman on 2016/7/27.
 */
import React, { Component, PropTypes } from 'react'

import Footer from './Footer'
import TodoItem from './TodoItem'
import { SHOW_ALL, SHOW_COMPLETED, SHOW_ACTIVE } from '../constants/TodoFilters';
const TODO_FILTERS = {
    [SHOW_ALL]: () => true,
    [SHOW_ACTIVE]: todo => !todo.completed,
    [SHOW_COMPLETED]: todo => todo.completed
}

class MainSection extends Component {
    constructor(props,context){
        super(props,context)
        this.state = {
            filter:SHOW_ALL
        }
    }

    handleClearCompleted(){
        this.props.actions.clearCompleted()
    }
    handleShow(filter) {
        this.setState({ filter })
    }
    renderFooter(completedCount){
        const { todos } = this.props;
        const { filter } = this.state;
        const activeCount = todos.length - completedCount;

        if (todos.length) {
            return (
                <Footer completedCount={completedCount}
                    activeCount={activeCount}
                        filter={filter}
                        onClearCompleted={this.handleClearCompleted.bind(this)}
                        onShow={this.handleShow.bind(this)}
                />
            )
        }

    }
    renderToggleAll(completedCount) {
        const { todos, actions } = this.props;
        if (todos.length > 0) {
            return (
                <input className="toggle-all"
                       type="checkbox"
                       checked={completedCount === todos.length}
                       onChange={actions.completeAll} />
            )
        }
    }

    render(){
        const { todos, actions } = this.props;
        const { filter } = this.state;
        const filterTodos = todos.filter(TODO_FILTERS[filter]);
        const completedCount = todos.reduce((count,todo) =>
            todo.completed ? count+1:count,
            0
        );
        return (
            <section className="main">
                {this.renderToggleAll(completedCount)}
                <ul className="todo-list">
                    {
                        filterTodos.map(todo =>
                            <TodoItem key={todo.id} todo={todo} {...actions}/>
                        )
                    }
                </ul>

                {this.renderFooter(completedCount)}
            </section>
        )


    }
}
MainSection.propTypes = {
    todos: PropTypes.array.isRequired,
    actions: PropTypes.object.isRequired
};

export default MainSection;